<template>
	<view class="wrapper">
		<uni-nav-bar backgroundColor="#f3f3f3" leftIcon="back" rightText="完成" title="设置备注和标签" @clickLeft="$back()" @clickRight="showAlert"></uni-nav-bar>
		<view class="f26 c666 title">备注名</view>
		<view class="center f30">
			<input type="text" placeholder="请输入备注名" class="flex" />
			<image src="../../static/friend/clear.png" mode="aspectFill"></image>
		</view>
		<view class="f26 c666 title">标签</view>
		<view class="center f30" @tap="$open('./friendLabel')">
			<input type="text" placeholder="添加标签对联系人进行分类" class="flex" disabled=""/>
			<image src="../../static/arr_right.png" mode="aspectFill"></image>
		</view>
		<view class="f26 c666 title">描述</view>
		<view class="center f30"><input type="text" placeholder="请输入描述" class="flex" /></view>
		<alert alertTitle="添加收钱说明" showInput="true" v-if="showAlert" @alertConfirm="alertConfirm"></alert>
	</view>
</template>

<script>
import alert from '../../components/alert/alert.vue';
export default {
	data() {
		return {
			showAlert: false
		};
	},
	components: { alert },
	onLoad() {},
	methods: {
		alertConfirm(type, text) {
			this.changeAlert();
		},
		changeAlert() {
			this.showAlert = !this.showAlert;
		}
	}
};
</script>

<style lang="scss">
.cblue {
	color: #0297fe;
}
button {
	width: 710rpx;
	height: 80rpx;
	background: rgba(2, 151, 254, 1);
	border-radius: 4rpx;
}
.center {
	background: #ffffff;
	padding: 0 30rpx;
	image {
		width: 34rpx;
		height: 34rpx;
	}
	input {
		height: 104rpx;
		line-height: 104rpx;
		text-indent: 20rpx;
	}
}
.f26 {
	padding: 31rpx;
}
page {
	background: #f3f3f3;
}
</style>
